<template>
    <van-popup v-model="show" position="right" :style="{ height: '100%', width: '70%' }">
        <div class="top">
            数据筛选
            <span @click="show = false">
                <van-icon name="cross" />
            </span>
        </div>
        <div class="middle">
            <slot></slot>
        </div>
        <div class="bottom">
            <van-button type="default" @click="$emit('handleReset')">重置</van-button>
            <van-button type="info" @click="handleSure()">确定</van-button>
        </div>
    </van-popup>
</template>

<script>
    export default {
        data () {
            return {
                show: false
            }
        },
        methods: {
            handleSure () {
                this.show = false;
                this.$emit('handleSearch');
            }
        }
    }
</script>

<style scoped lang="less">
    .van-popup {
        .top {
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
            box-sizing: border-box;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            font-weight: bold;
            padding: 0 10px 0 15px;
            border-bottom: 1px solid #eee;
            span {
                font-size: 17px;
                color: #aaa;
                float: right;
                margin-right: 5px;
                margin-top: 3px;
            }
        }
        .middle {
            margin-top: 35px;
            padding: 0 10px;
            box-sizing: border-box;
            width: 100%;
            height: calc(100% - 80px);
            overflow: auto;
        }
        .bottom {
            position: absolute;
            bottom: 0px;
            width: 100%;
            display: flex;
            button {
                flex: 1;
                border-radius: 0px;
            }
            .van-button--default {
                color: #1989fa;
            }
        }
    }
</style>